<template>
    <div>
<van-tabs v-model:active="active">
  <van-tab title="正在热映">
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
   <div class="box">
    <img src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="" style="width: 100px;height: 120px;">
    <div class="ba">
        <p><h3>逆行人生</h3></p>
        <p>逆行人生逆行人生</p>
        <p>逆行人生逆行人生逆行人生</p>
        <p>逆行生逆行人</p>
    </div>
    <div class="bb">
    <button>购票</button>
    </div>
   </div>
  </van-tab>
  <van-tab title="即将上映">内容 2</van-tab>
</van-tabs>
    </div>
</template>

<script setup>
import { ref } from 'vue';
const active = ref(0);
</script>

<style scoped>
.box{
    width: 370px;height: 120px;
    float: left;
    margin-bottom: 10px;
    img{
        float: left;
    }
    .ba{
        float: left;
        width: 200px;height: 120px;

        p{
            h3{
                margin: 0;
            }
            margin: 0;
            margin-bottom: 5px;
        }
        
    }
    .bb{
        float: right;
        width: 70px;height: 120px;
        button{
            margin: 40px 0px;
        }
    }
    
}
</style>